<template>
	<div class="container">
		<div class="kinds">
			<div class="item" v-for="(item, index) in static_data" :key="index">
				<h1>{{ item.depart_name }}</h1>
				<h2>{{ item.depart_success_count }}</h2>
			</div>
		</div>
		<el-row>
			<el-form
				:inline="true"
				:model="listQuery"
				ref="searchForm"
				class="demo-form-inline"
			>
				<el-col :span="20">
					<el-form-item label="状态" prop="listQuery.status">
						<el-select
							placeholder="不限"
							size="medium"
							v-model="listQuery.status"
							clearable
						>
							<!-- todo type类型 -->
							<el-option label="成功" value="1"></el-option>
							<el-option label="失败" value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="发送时间" prop="timeVal">
						<el-date-picker
							v-model="timeVal"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							value-format="yyyy-MM-dd"
							:unlink-panels="true"
							@change="getTimeVal"
						></el-date-picker>
					</el-form-item>
					<el-form-item prop="listQuery.custom_query_type">
						<el-select
							placeholder="不限"
							v-model="listQuery.custom_query_type"
							clearable
						>
							<el-option label="手机号" value="3"></el-option>
							<el-option label="患者编号" value="2"></el-option>
							<el-option label="检查编号" value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="listQuery.custom_query_value">
						<el-input
							style="width: 13vw"
							placeholder="请输入内容"
							clearable
							v-model="listQuery.custom_query_value"
							autofocus
						>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4" class="tr">
					<el-form-item>
						<el-button type="primary" @click="handleRefresh" class="btn"
							>查询</el-button
						>
						<el-button type="" @click="handleReset('searchForm')"
							>重置</el-button
						>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
		<!-- 搜索 -->
		<my-table
			:table-data="tableData"
			:col-configs="colConfigs"
			:list-loading="listLoading"
			:total="total"
			:page-size="listQuery.pagesize"
			@refreshList="getList"
		>
			<el-table-column label="状态" slot="opt" width="80px">
				<!--
				<template slot-scope="{row}">
					<span v-if="row.notice_type === 0">不限</span>
					<span v-if="row.notice_type === 1">成功</span>
					<span v-if="row.notice_type === 2">失败</span>
				</template>
				-->
				<template slot-scope="{ row }">
					<span v-if="row.status === true">成功</span>
					<span v-if="row.status === false">失败</span>
				</template>
			</el-table-column>
		</my-table>
	</div>
</template>

<script>
import myTable from 'components/myTable'
import { getMsgList, getMsgStatic } from '@/api/log-mg'
import { objSum } from '@/utils/base.js'
export default {
	name: 'MsgManger',
	components: { myTable },
	data () {
		return {
			listQuery: {
				pagesize: 10,
				pageindex: 1,
				custom_query_type: null,
				custom_query_value: null,
				start_date: null,
				end_date: null,
				status: null,
			},
			timeVal: [],
			colConfigs: [
				{
					type: 'index',
					label: '序号',
					width: '50px'
				},
				{ slot: 'opt' },
				{
					prop: 'patient_name',
					label: '接收方姓名',
					sortable: false,
					width: '100px'
				},
				{
					prop: 'mobile_phone',
					label: '接收方手机',
					sortable: false,
					width: '180px'
				},
				{
					prop: 'notice',
					label: '发送内容',
					sortable: false,
				},
				{
					prop: 'create_time',
					label: '发送时间',
					sortable: false,
					width: '180px'
				},
			],
			tableData: [],
			static_data: [],
			total: 0,
			listLoading: false,
		}
	},
	computed: {},
	created () { },
	mounted () {
		this.getMsgStatic()
		this.getList()
	},
	methods: {
		async	getList ( val ) {
			const params = Object.assign( this.listQuery, val )
			console.log( params )
			getMsgList( params ).then( res => {
				if ( res.code === 0 ) {
					this.tableData = res.data
					this.total = res.page.total_count
				}
			} )
		},
		getMsgStatic () {
			getMsgStatic().then( res => {
				let sum = objSum( res.data, 'depart_success_count', 'depart_fail_count' )
				let sumData = [ {
					depart_success_count: 0,
					depart_code: '总发送量',
					depart_name: '总发送量'
				},
				{
					depart_success_count: 0,
					depart_code: '发送失败量',
					depart_name: '发送失败量'
				}
				]
				sumData[ 0 ].depart_success_count = sum.depart_success_count
				sumData[ 1 ].depart_success_count = sum.depart_fail_count
				if ( sum.depart_fail_count === 0 ) {
					// 不显示失败项
					sumData.splice( 1, 1 );
				}
				this.static_data = [ ...res.data, ...sumData ]

				console.log( this.static_data );
				// 统计求和钉钉ｄｄ
			} )
		},
		getTimeVal () {
			// 时间查询
			let obj = {
				start_date: null,
				end_date: null,
			}
			if ( this.timeVal !== null ) {
				obj.start_date = this.timeVal[ 0 ]
				obj.end_date = this.timeVal[ 1 ]
			}
			this.listQuery = Object.assign( this.listQuery, obj )
			this.getList()
		},
		handleRefresh () {
			this.getList()
		},
		handleReset ( searchForm ) {
			// 表单重置
			this.listQuery = {
				pagesize: 10,
				pageindex: 1,
				custom_query_type: null,
				custom_query_value: null,
				start_date: null,
				end_date: null,
				status: null,
			}
			this.getList()
		},
	},
	watch: {},
	filter: {},
}
</script>

<style scoped lang="less">
.container {
	padding: 0 10px;
	.btns {
		margin-bottom: 20px;
	}
	.kinds {
		margin-top: 15px;
		margin-bottom: 15px;
		.item {
			width: 9%;
			height: 130px;
			// margin-right: 2.2%;
			display: inline-block;
			// border: 1px solid #00ff00;
			text-align: left;
			padding-left: 2.5%;
			background-image: url('~@/assets/imgs/common.png');
			background-size: 100% 100%;
			h1 {
				height: 20px;
				line-height: 20px;
				font-size: 14px;
				color: #333 !important;
				font-weight: 500;
				margin-bottom: 5px;
				margin-top: 35px;
			}
			h2 {
				color: #333333;
				font-weight: 400;
				font-size: 30px;
				height: 42px;
				line-height: 42px;
				margin-bottom: 25px;
			}
		}
	}
}
</style>
